<style scoped>
.system-list /deep/ .el-collapse {
  border-top: 0;
}
.noticeShowM {
  border-left: 4px solid #409EFF;
  padding: 15px;
  font-size: 13px;
  line-height: 1.7;
  background: #F0F8FF;
  margin-bottom: 20px;
}
.totalR {
  float:right;
  margin-right:8px;
  margin-top:6px;
  font-size: 14px;
  color:#666;
}
</style>
<!--  -->
<template>
  <div class="system-list">
    <div class="noticeShowM">
      <p>
        可针对网站的数据内容进行统一管理，可设置系统模块的展示样式和默认文案。
      </p>
    </div>

    <TipTotal title="系统数据列表">
      <div>
        <OperateSystemList :resetData="resetData" :getData="getData"/>
      </div>
      <template slot="total">
        <p class="totalR" v-if="total">系统数（<span
          class="green">{{currentSite && currentSite.language && currentSite.language.name}}</span>）：{{total}}</p>
      </template>
    </TipTotal>

    <!-- 列表数据 -->
    <DataTable ref="systemDataTable" :dataTotal="dataTotal" />
    <div style="height: 18px;"></div>
  </div>
</template>

<script>
import TipColla from '@/components/common/TipColla.vue'
import TipTotal from '@/components/common/TipTotal.vue'
import OperateSystemList from '@/components/main/user/system/OperateSystemList.vue'
import DataTable from '@/components/main/user/system/DataTable.vue'
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      total: 0
    }
  },
  computed: {
    ...mapGetters([
      'currentSite'
    ])
  },
  components: {
    TipColla,
    TipTotal,
    OperateSystemList,
    DataTable
  },
  methods: {
    dataTotal (total) {
      this.total = '' + total
    },
    resetData () {
      this.$refs['systemDataTable'].resetData()
    },
    getData () {
      return this.$refs['systemDataTable'].getTableData()
    }
  }
}

</script>
